<template>
  <div>
    <div class="box">
      <ul>
        <li class="bookli" v-for="(item, index) in newUser" :key="index" @click="books(index)">
          <div class="leftbox">
            <img :src="require(`../assets/img/book/${item.img}`)" alt="" />
          </div>

          <div class="rightbox">
            <div class="font1">{{ item.bookname }}</div>
            <div class="font2">{{ item.author }}</div>
            <div class="font2">{{ item.publisher }}</div>
            <div class="font2">{{ item.time}}</div>
            <div class="introduction">{{ item.introduction }}</div>
            
          </div>
          
        </li>
        <pagination :pages="showUsers" @click-pag="fn" :page="uPage">
        </pagination>
      </ul>
    </div>
    <!-- <img :src="getimg" alt="" />
    <img :src="getanimalimg" alt="" /> -->
  </div>
</template>

<script>
import axios from "axios";
import pagination from "../components/pagination";
export default {
  data() {
    return {
      booksinfo: [],
      img: "",
      booksid:[],
      uPage: 1, //当前页
      perPage: 5, //每页显示多少条
    };
  },
   components: {
    pagination,
  },
  methods:{
    books(index){
      this.$router.push({
        name:'bookinfo',
        query:{bookid:this.booksid[index]}
      })
    },
    fn(n) {
      // console.log(n)
      this.uPage = n; //接收到 子组件传过来的数据 修改data的显示
    },
  },
  created() {
    this.booksinfo = this.$route.query.booksinfo;
    console.log(this.booksinfo);

    for(var i =0;i<this.booksinfo.length;i++){
      this.booksid.push(this.booksinfo[i].bookid)
    }
  },
  mounted() {
    // this.imgg=require('@/assets/img/book/' + this.animalimg  )
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.booksinfo = this.$route.query.booksinfo;
  },
  computed: {
    getimg() {
      // return require('@/assets/img/book/' + this.img  )
      return require(`@/assets/img/book/${this.img}`);
    },
    // getanimalimg() {
    //   return require("@/assets/img/book/" + this.animalimg + "");
    // },
     showUsers: {
      get() {
        return Math.ceil(this.booksinfo.length / this.perPage);
      },
    },
    newUser: {
      //渲染到页面
      get() {
        // 分割数据
        // this.$options.methods.searchMethod();
        return JSON.parse(JSON.stringify(this.booksinfo)).splice(
          (this.uPage - 1) * this.perPage,
          this.perPage
        );
      },
    },
  },
};
</script>

<style scoped>
@import "../assets/css/booksearchinfo";
</style>